<template>
  <div class="box">{{ a }} + {{ b }} = {{ c }}</div>
  <button @click="add">添加</button>
  <div class="testBox">
    <div class="text">这这这这这这里有很多文字里有</div>
  </div>
  <div class="fitBox">这里有内容</div>
  <div class="wrap">
    <div class="item">
      <div>你心中描画怎样的蓝图</div>
    </div>
  </div>
  <div class="wrap">
    <div class="fillavailable">测试</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      a: 1,
      b: 2
    }
  },
  computed: {
    c() {
      return this.a + this.b
    }
  },
  methods: {
    add() {
      console.log(`helloworld`)
      this.a++

      let a = 0
      let b = (a ??= 999)
      console.log(b)
    }
  }
}
</script>
<style type="text/css">
.box {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
}
.testBox {
  border: 1px solid #000;
  width: max-content;
  margin: 0 auto;
}
.fitBox {
  width: fit-content;
  height: 100px;
  border: 1px solid #000;
  margin: 0 auto;
}
.wrap {
  /* height: 300px; */
  border: 4px solid #000;
  padding: 4px;
}
.item {
  border: 4px solid #000;
  background: #fe731a;
  margin-bottom: 6px;
  width: fit-content;
  margin: auto;
}
.fillavailable {
  width: fill-available;
}
</style>
